<template>
	<view>
		<view class="content">
			<image src="../../static/rectangle2.png"></image>
			<text>省运慧021510号客服</text>
		</view>
		<view :style="{height: style.contentViewHeight + 'px'}">
			<scroll-view id="scrollview" class="chat-window" scroll-y="true"
				:style="{height: style.contentViewHeight + 'px'}" :scroll-with-animation="true" :scroll-top="scrollTop"
				@scroll="scroll">
				<view class="content_top">
					<text>省运慧01号客服</text>
					<view>您好，请问有什么可以帮您？</view>
				</view>
				<view v-for="(item,index) in list">
					<view>
						<view class="content_key">
							<text>{{item.creationTime}} {{item.sender}}</text>
							<view class="views">
								<view>{{item.msg}}</view>
							</view>
						</view>
					</view>
					<view class="content_top" v-for="(items,index) in item.replyMsg">
						<text>{{items.sender}} {{items.creationTime}}</text>
						<view>{{items.msg}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="content_box">
			<textarea placeholder="您好,省运慧很高兴为您服务,请您描述您的问题" v-model="msg"></textarea>
			<view @click="CreateChat()">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		GetChatRecord,
		CreateChat
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	export default {
		data() {
			return {
				list: [],
				msg: '',
				// 聊天页面时时滚动样式
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0
				},
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			};
		},
		created() {
			const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度     api为获取系统信息同步接口
			console.log(res)
			this.style.pageHeight = res.windowHeight;
			this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) -
			70; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
			this.scrollToBottom(); //创建后调用回到底部方法
		},
		onLoad() {
			this.GetChatRecord()
			 this.replyRules = {
			    '你好': '你好',
			    '吃饭了吗': '还没有'
			  };
		},
		watch:{
			msg(newVal,oldVal){
			 this.handleMessage(newVal);
			}
		},
		methods: {
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop; // 必要
			},
			scrollToBottom: function() {
				let that = this;
				that.scrollTop = that.old.scrollTop
				let query = uni.createSelectorQuery();
				query.selectAll('.m-item').boundingClientRect();
				query.select('#scrollview').boundingClientRect();
				query.exec((res) => {
					that.style.mitemHeight = 0;
					that.style.mitemHeight = that.style.mitemHeight + res[1].height + 40 //获取所有内部子元素的高度
					setTimeout(() => {
						if (that.style.mitemHeight > (that.style.contentViewHeight -
							100)) { //判断子元素高度是否大于显示高度
							that.$nextTick(function() {
								that.scrollTop = 100000000000000 //用子元素的高度减去显示的高度就获益获得序言滚动的高度
							});

						}
					}, 600)

				})
			},
			// 获取用户留言记录
			async GetChatRecord() {
				var userId = getValue('id')
				try {
					const {
						data: res
					} = await GetChatRecord({
						userId
					})
					this.list = res.result
					this.scrollToBottom()
				} catch (e) {}
			},
			async CreateChat() {
				var senderId = getValue('id')
				var msg = this.msg
				if (msg == '') {
					uni.showToast({
						title: "留言不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				try {
					const {
						data: res
					} = await CreateChat({
						senderId,
						msg,
						parentId: '0'
					})
					this.GetChatRecord()

				} catch (e) {}
			},
			
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding-bottom: 400upx !important;
	}

	.content {
		padding: 0 30upx;
		display: flex;
		align-items: center;
		background-color: #ef4d3d;
		width: 100%;
		height: 90upx;

		image {
			width: 50upx;
			height: 50upx;
		}

		text {
			font-size: 24upx;
			color: #fff;
			padding-left: 20upx;
		}
	}

	.content_top {
		padding: 0 25upx;
		padding-top: 50upx;

		text {
			display: block;
			font-size: 24upx;
			font-weight: bold;
		}

		view {
			border-radius: 17upx;
			background: #FFFFFF;
			box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5, 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
			// width: 440upx;
			display: inline-block;
			// height: 65upx;
			font-size: 24upx;
			font-weight: bold;
			line-height: 65upx;
			padding: 0 20upx;
			margin-top: 30upx;
		}
	}

	.content_key {
		padding: 0 25upx;
		padding-top: 50upx;

		text {
			display: block;
			font-size: 24upx;
			font-weight: bold;
			text-align: right;
		}

		.views {
			display: flex;
			justify-content: flex-end;

			view {
				border-radius: 17upx;
				background: #FFFFFF;
				box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5, 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
				// width: 440upx;
				display: inline-block;
				// height: 65upx;
				font-size: 24upx;
				font-weight: bold;
				line-height: 65upx;
				padding: 0 20upx;
				margin-top: 30upx;
			}
		}
	}

	.content_box {
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 30upx 25upx 40upx;

		textarea {
			width: 100%;
			height: 150upx;
			border-radius: 17upx;
			border: 2upx solid #e5e5e5;
			margin-bottom: 20upx;
			font-size: 26upx;
			font-weight: bold;
			padding: 20upx;
		}

		view {
			width: 500upx;
			height: 80upx;
			border-radius: 15upx;
			background-color: #ef4d3d;
			text-align: center;
			color: #fff;
			line-height: 80upx;
			margin: 0 auto;
		}
	}
</style>
